<template>
    <div class="app-container" style="display: flex;">
        <div class="app-container" style="flex:1;position: relative;">
            <div style="font-weight: 600;margin-bottom: 10px;">销售发送卡片统计</div>
            <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
                <el-form-item label="查询时间周期" label-width="auto">
                    <el-date-picker
                    v-model="dateRange"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                </el-form-item>
            </el-form>
            <el-table v-loading="loading" :data="aiRequestRecordsList">
                <el-table-column label="销售名称" align="center" prop="name" />
                <el-table-column label="发送群个数" align="center" prop="chatNum" />
                <el-table-column label="点击人数" align="center" prop="clickNum" />
                <el-table-column label="注册人数" align="center" prop="registerNum" />
            </el-table>
        
            <!-- <pagination
                v-if="total>0"
                :total="total"
                v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"
                @pagination="getList"
            /> -->
        </div>
        <div class="app-container" style="flex:1;position: relative;">
            <div style="font-weight: 600;margin-bottom: 10px;">素材生成统计</div>
            <el-form :model="queryParams2" ref="queryRef2" :inline="true" label-width="68px">
                <el-form-item label="查询时间周期" label-width="auto">
                    <el-date-picker
                    v-model="dateRange2"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="handleQuery2">搜索</el-button>
                </el-form-item>
            </el-form>
            
            <el-table v-loading="loading2" :data="aiRequestRecordsList2">
                <el-table-column label="素材名称" align="center" prop="hairName" />
                <el-table-column label="素材图片" align="center" prop="swapPicture" >
                    <template #default="scope">
                        <el-image 
                            :preview-teleported="true" 
                            :z-index="99999999" 
                            :preview-src-list="[scope.row.swapPicture]" 
                             style="width: 100px; height: 100px" :src="scope.row.swapPicture" fit="contain" />
                    </template>
                </el-table-column>
                <el-table-column label="生成次数" align="center" prop="successNum" />
                <el-table-column label="保存次数" align="center" prop="saveNum" />
            </el-table>
        </div>
    </div>
</template>
  
<script setup name="AiRequestRecords">
import {getSendCardData,getHairSuccess} from "@/api/system/aiRequestRecords";

const { proxy } = getCurrentInstance();
const data = reactive({
    queryParams: {
        // pageNum: 1,
        // pageSize: 10,
        startTime:undefined,
        endTime:undefined,
    },
    queryParams2: {
        startTime:undefined,
        endTime:undefined,
    },
});
const { queryParams, queryParams2} = toRefs(data);

const aiRequestRecordsList = ref([]);
const loading = ref(true);
const total = ref(0);
const dateRange = ref([]);

/** 查询极客ai换发调用记录列表 */
function getList() {
    loading.value = true;
    console.log(dateRange.value);
    if(dateRange.value!=null && dateRange.value.length>1){
        queryParams.value.startTime = dateRange.value[0];
        queryParams.value.endTime = dateRange.value[1];
    }else{
        queryParams.value.startTime = null;
        queryParams.value.endTime = null;
    }
    console.log(queryParams.value);
    getSendCardData(queryParams.value).then(response => {
        aiRequestRecordsList.value = response.data;
        // total.value = response.total;
        loading.value = false;
    });
}

/** 搜索按钮操作 */
function handleQuery() {
    // queryParams.value.pageNum = 1;
    getList();
}

getList();
const aiRequestRecordsList2 = ref([]);
const loading2 = ref(true);
const total2 = ref(0);
const dateRange2 = ref([]);
/** 查询极客ai换发调用记录列表 */
function getList2(e) {
    loading2.value = true;
    if(dateRange2.value!=null && dateRange2.value.length>1){
        queryParams2.value.startTime = dateRange2.value[0];
        queryParams2.value.endTime = dateRange2.value[1];
    }else{
        queryParams2.value.startTime = null;
        queryParams2.value.endTime = null;
    }
    getHairSuccess(queryParams2.value).then(response => {
        aiRequestRecordsList2.value = response.data;
        loading2.value = false;
    });
}

/** 搜索按钮操作 */
function handleQuery2() {
    getList2();
}
getList2();
</script>
<style lang="scss" scoped>
</style>
  